<template>

        <div class="MeasureTool">
            <div  id="myModal"   class="bf-panel bf-has-title">
                    <div class="bf-title" id="headmove">测量</div>
                    <div class="bf-panel-body">
                            <div class="bf-tab-container">
                                <ul class="bf-measure-tab">
                                    <li id="distance" class="bf-measure-tab-item bf-active" data-type="Distance">
                                        <img src='images/distance.png' style="width:30px;height=30px;"></img>
                                        <li class="gld-bimface gld-bf-distance" title="距离测量"></li>
                                    </li>
                                </ul>
                            </div>
                            <div class="bf-tab-body">
                                <ul class="bf-measure-info">
                                    <li class="bf-measure-distance">距离：
                                        <span class="bf-measure-value">--</span> mm
                                        <span class="bf-measure-reset gld-bimface gld-bf-reset-box" title="重置">
                                        <img src='images/reset.png' style="width:25px;height=25px;"></img>
                                        <span></span>
                                        </span>
                                    </li>
                                    <li class="bf-measure-x">X： --</li>
                                    <li class="bf-measure-y">Y： --</li>
                                    <li class="bf-measure-z">Z： --</li>
                                </ul>
                            </div>
                    </div>
            </div>
        </div>





</template>



<style scoped>
    .measureTool {
        left: 350px;
        bottom: 270px;
        width: 160px;
        height: 190px;
    }
    .bf-panel.bf-has-title {
        padding-top: 40px;
        background-color: rgba(17,17,17,0.88);
    }
    .bf-title {
        padding: 10px 30px 10px 10px;
        box-sizing: border-box;
        color: #fff;
        border-bottom: 1px solid #666;
        margin-top: -40px;
        background-color: rgba(0,0,0,0.88);
    }
    .bf-measure-tab {
        border-bottom: 1px solid #555;
    }
    .bf-measure-tab-item.bf-active {
        width: 100%;
        height: 32px;
        margin: 4px 0;
        text-align: center;
    }
    .bf-measure-tab .bf-measure-tab-item .gld-bimface {
        font-size: 32px;
        line-height: 1;
    }
    .bf-measure-info {
        font-size: 12px;
        line-height: 24px;
    }
    .bf-measure-info .bf-measure-distance {
        color: #fff;
        padding-left: 11px;
        height: 28px;
    }
    .bf-measure-info li {
        padding-left: 27px;
    }
    .bf-measure-info .bf-measure-distance .bf-measure-value {
        font-size: 14px;
        color: #ff9d0b;
    }
    .bf-measure-reset.gld-bimface.gld-bf-reset-box {
        float: right;
        line-height: 32px;
    }
    .bf-measure-info .bf-measure-x {
        color: #d0021b;
    }
    .bf-measure-info .bf-measure-y {
            color: #7ed321;
    }
    .bf-measure-info .bf-measure-z {
            color: #4a90e2;
    }
</style>
